<script>
import CardItems from '@/components/CardItems/index.vue'
import { cardConfig } from './config/hour/cardConfig'
import { popConfig } from './config/hour/popConfig'
import { selectConfig } from './config/hour/selectConfig'
import { headerConfig } from './config/hour/tableConfig'

import { cardConfig as internetConfig } from './config/internet/cardConfig'
import { popConfig as internetPopConfig } from './config/internet/popConfig'
import { selectConfig as internetSelectConfig } from './config/internet/selectConfig'
import { headerConfig as internetHeaderConfig } from './config/internet/tableConfig'

export default {
  name: 'ElectricityPrice',
  components: { CardItems },
  data() {
    return {
      nodeSelect: {},
      isExpand: true,
      expandLeft: 200,
      activeTab: 'device',
      tabList: [
        { key: '1', name: '分时电价' },
        { key: '2', name: '上网电价' }
      ],
      cardConfig: cardConfig['hour'],
      popConfig: popConfig['hour'],
      selectConfig: selectConfig['hour'],
      headerConfig: headerConfig['hour']
    }
  },
  methods: {
    handleClickTab(tab) {
      if (tab.index == '0') {
        this.cardConfig = cardConfig['hour']
        this.popConfig = popConfig['hour']
        this.selectConfig = selectConfig['hour']
        this.headerConfig = headerConfig['hour']
      } else {
        const internetCard = internetConfig['internet']
        internetCard.isShowTabs = true
        internetCard.cunrrenTabIndex = '2'
        // internetCard.hiddenSelect = true
        this.cardConfig = internetCard
        this.popConfig = internetPopConfig['internet']
        this.selectConfig = internetSelectConfig['internet']
        this.headerConfig = internetHeaderConfig['internet']
      }
    },

    /**
     * @param selectData   回传表单的选择数据
     * @param prop        事件触发的表单字段
     * @param selectList  回传的表单配置项
     */
    selectChange(selectData, prop, selectList) {

    }
  }
}
</script>

<template>
  <div class="electricity-price">
    <div class="CardItems-box">
      <CardItems
        ref="cardItemsRef"
        :tab-list="tabList"
        @handleClickTab="handleClickTab"
        :card-config="cardConfig"
        :pop-config="popConfig"
        :select-config="selectConfig"
        :header-config="headerConfig"
        :dynamic-select-list="selectConfig"
        :outer-params="nodeSelect"
        @selectChange="selectChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.electricity-price {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  // padding: 17px;

  .CardItems-box, .el-tab-pane {
    flex: 1;
  }
}
</style>
